css同时实现文字颜色渐变阴影和外描边

您所在的位置：网站首页 › 文字 emoji › css同时实现文字颜色渐变阴影和外描边

css同时实现文字颜色渐变阴影和外描边

#css同时实现文字颜色渐变阴影和外描边| 来源: 网络整理| 查看: 265

css同时实现文字颜色渐变阴影和外描边 2023年7月4日 488次浏览前言

之前写过一篇文章css实现模糊镜效果及渐变字体和text-shadow冲突解决方案，介绍了文字渐变和阴影冲突的解决方案，但是假如文字渐变和阴影又遇到外描边怎么办呢？我们知道外描边一般使用阴影来实现的，假如用阴影实现，那么和阴影就有冲突了，只能用别的方式来实现外描边。

css外描边

text-stroke描边是居中描边，不是外描边，要实现外描边一般又两种解决方案：

一：通过阴影实现

text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;

二、通过伪元素before或者after来实现，包一层,或者before、after的text-stroke: 0;，外层设置描边的2倍，都可以，下面举例一种。

例如：

h2 { font-size: 31px; font-weight: 800; color: #70b4d9; position: relative; z-index: 1; } h2::before { content: attr(data-text); position: absolute; -webkit-text-stroke: 6px #fff; z-index: -1; } 数据采集 css外描边+阴影+文字渐变

之前了解到，阴影+文字渐变是又冲突的，要通过伪元素来实现，描边用阴影实现的化和阴影又有冲突，因此也要用伪元素来实现。假如一个div里同时用after和before两个伪元素实现的化，还是有问题的，最终采用如下方案来实现css外描边+阴影+文字渐变。

haorooms测试 .haorooms_shoke_gd_sd { background-color: transparent; --gradient-color: linear-gradient(to right,rgb(254, 220, 70),rgb(251, 112, 153)); -webkit-text-stroke: 2px rgb(248, 231, 28);// 描边写实际描边的2倍 text-shadow: rgb(187, 201, 220) 2px 2px 2px; position: relative; &::after { z-index: 10; background-image: var(--gradient-color); -webkit-background-clip: text; color: transparent; // 去除继承父级样式 text-shadow: none; content: attr(data-text); position: absolute; /* 实现元素外描边的关键 */ -webkit-text-stroke: 0; } }

这样就实现了css外描边+阴影+文字渐变

你有什么好的实现方式吗？可以留言告诉我。

PREVIOUS: NEXT: css噪点效果及简单假进度条记录判断window.open是否被禁用或者阻止的方法

Tags: css，外描边，阴影，文字渐变

【本文地址】

css同时实现文字颜色渐变阴影和外描边

css同时实现文字颜色渐变阴影和外描边

今日新闻

推荐新闻